<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>
   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">
       
        // 01 jsx- element
        function tick (){ 
            var e = 
                <div>
                    <h1>Clock</h1>
                    <h3>time:{new Date().toLocaleTimeString()}</h3>
                </div>

            ReactDOM.render(e,document.getElementById('app'))
        }

        tick()
        setInterval(tick, 1000);

       // 02 函数组件
       // 2-1  不传值
        function Clock(){
            return (
                <div>
                    <h1>Clock</h1>
                    <h3>time:{new Date().toLocaleTimeString()}</h3>
                </div>
            )
        }

        function tick (){ 
            var e = <Clock />
            ReactDOM.render(e,document.getElementById('app'))
        }
        
        //2-2 传值
        function Clock(props){
            return (
                <div>
                    <h1>Clock</h1>
                    <h3>time:{props.time}</h3>
                </div>
            )
        }

        function tick (){ 
            // f Clock(props)   props:{time:时间}
            var e = <Clock time={new Date().toLocaleTimeString()}/>
            ReactDOM.render(e,document.getElementById('app'))
        }

        //手动：每个一秒钟 拨动一下秒针 ，把时间给时钟
         setInterval(tick, 1000);


        //03 类组件实现
        // 3-1 没有状态  没有行为  (对比 函数组件和类组件 传值区别)
        class Clock extends React.Component{

            render(){
                return (
                    <div>
                        <h1>Clock</h1>
                        <h3>time:{this.props.time}</h3>
                    </div>
                )
            }

        }
        function tick (){ 
            // new Clock(props)  
            var e = <Clock time={new Date().toLocaleTimeString()}/>
            ReactDOM.render(e,document.getElementById('app'))
        }

        setInterval(tick, 1000);

        // 3-1 没状态  有行为
        class Clock extends React.Component{

            render(){
                return (
                    <div>
                        <h1>Clock</h1>
                        <h3>time:{this.props.time}</h3>
                    </div>
                )
            }

        }

        ReactDOM.render(<Clock time={new Date().toLocaleTimeString()}/>,document.getElementById('app'))
    </script>
</body>
</html>